<template>
  <div class="users-container">
    <h4 class="title">用户管理</h4>
    <table class="users-table">
      <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>头衔</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in userList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.position }}</td>
          <td>
            <a href="#" @click.prevent="gotoDetail(item.id)">详情</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: [
        {
          id: 1,
          name: 'qq',
          age: 28,
          position: '前端工程师'
        },
        {
          id: 2,
          name: 'zs',
          age: 30,
          position: 'java开发工程师'
        },
        {
          id: 3,
          name: 'ls',
          age: 38,
          position: '高级前端工程师'
        },
        {
          id: 4,
          name: 'zw',
          age: 44,
          position: '专家'
        },
        {
          id: 5,
          name: 'xx',
          age: 23,
          position: '实习生'
        }
      ]
    }
  },
  methods: {
    gotoDetail(id) {
      this.$router.push(`/main/userInfo/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.users-container {
  width: 100%;

  .title {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }
  .users-table {
    width: 100%;
  }
}
</style>
